<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<html>
	<head>
		<title>用户注册</title>
		<meta charset="UTF-8">
		<meta name="decorator" content="cms_default_${site.theme}_regist"/>
		<meta name="description" content="JeeSite ${site.description}" />
		<meta name="keywords" content="JeeSite ${site.keywords}" />
		<script src="${ctxStatic}/js/wending/regist.js" type="text/javascript"></script>
		<script type="text/javascript">
			// 手机号码验证  
			$.validator.addMethod("isMobile", function(value, element) {  
			    var length = value.length;  
			    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;  
			    return this.optional(element) || (length == 11 && mobile.test(value));  
			}, "请正确填写您的手机号码");
			$.validator.setDefaults({
			    submitHandler: function() {
			    	form.submit();
			    }
			});
			$().ready(function() {
				// 提交时验证表单
				var validator = $("#inputForm").validate({
					errorElement: "span",
					rules: {
						repassword: {
					        required: true,
					        minlength: 6,
					        maxlength: 25,
					        equalTo: "#password"
					    },
					    name: {
					        required: true,
					    },
					    phoneNum: {
					    	required : true,  
				            minlength : 11,  
				            // 自定义方法：校验手机号在数据库中是否存在  
				            // checkPhoneExist : true,  
				            isMobile : true  
					    },
					    grade: {
					    	range: [0,750]
					    }
					},
					messages: {
						account: {
							required: "请填写账号",
							minlength: "账号不能少于6位"
						},
						password: {
							required: "请输入密码",
							minlength: "密码不能少于 6位且不能大于25位",
						},
						repassword: {
					        required: "请确认密码",
					        minlength: "密码不能少于 6位且不能大于25位",
					        equalTo: "两次密码输入不一致"
					    },
					    name: {
					    	required: "姓名不能为空",
					    },
					    mail: {
					    	required: "请填写邮箱",
					    },
					    phoneNum: {
					    	required: "请填写手机号",
					    	minlength: "请输入11位手机号",
					    },
						provinceId: {
							required: "请选择省份",
					    },
					    school: {
					    	required: "请填写学校",
					    },
					    grade: {
					    	required: "请填写成绩",
							minlength: "成绩最少一位",
					    },
					    graduateYear: {
					    	required: "请选择毕业年份",
					    },
					    grade: {
					    	required: "请填写成绩",
					    	range: "成绩必须在0-750之间",
					    }
					}
				});

				$(".cancel").click(function() {
					validator.resetForm();
				});
			});
			//3秒消息提示
			$(function(){
				var message = "${message}";
				if(message){
					layer.msg(message,
						{
							time: 3000
						});
				}
			});
		</script>
		<style>
		.error{
			color:#1fbed0;
		}
		</style>
	</head>
	<body>
		<form:form id="inputForm" modelAttribute="frontUser" action="${ctx}/user/save" method="post" class="form-horizontal">
			<div class="login">
				<div class="login-lt">
					<img src="${ctxStatic}/img/regist.png" />
				</div>
				<div class="banner-rt login-rt login-rt1">
					<ul>
						<li><h1>用户注册</h1></li>
						<li>
							<input type="text" name="account" required minlength="6" maxlength="30"/>
							<!-- <span class="qubie"></span> -->
							<!-- <i class="glyphicon glyphicon-ok"></i> -->
						</li>
						<li>
							<input type="password" name="password" id="password" required minlength="6" maxlength="25" placeholder="输入密码"/>
						</li>
						<li>
							<input type="password"  name="repassword" placeholder="确认密码"/>
						</li>
						<li>
							<input type="text"  name="name" placeholder="姓名"/>
						</li>
						<li>
							<input type="text"  name="phoneNum" required placeholder="电话"/>
						</li>
						<li>
							<input type="email""  name="mail" required placeholder="邮箱"/>
						</li>
						<li>
							<div class="set1">
								<label>性别</label>
								<input id="sex" type="hidden" name="sex" value="1">
								<a href="javascript:;" name="man" onclick="onset(this, '1','sex')" value="1" class="set2"><span>男</span></a>
								<a href="javascript:;" name="woman" onclick="onset(this, '2','sex')" value="2"><span>女</span></a>
							</div>
						</li>
						<li>
							<form:select path="provinceId" class="input-xlarge required">
								<form:option value="" label="选择省份"/>
								<form:options items="${fns:getRegionList('2')}" itemLabel="name" itemValue="id" htmlEscape="false"/>
							</form:select>
							<!-- <i class="glyphicon glyphicon-chevron-down"></i> -->
						</li>
						<li>
							<input type="text" name="school" required placeholder="请输入学校">
						</li>
						<li>
							<form:select path="graduateYear" class="input-xlarge required">
								<form:option value="" label="选择毕业年份"/>
								<form:option value="2017" label="2017"/>
							</form:select>
						</li>
						<li>
							<div class="set1">
								<label>文理科</label>
								<input id="artsScience" type="hidden" name="artsScience" value="1">
								<a href="javascript:;" name="arts" onclick="onset(this, '1','artsScience')"  class="set2"><span>文科</span></a>
								<a href="javascript:;" name="science" onclick="onset(this, '2','artsScience')" test="理科"><span>理科</span></a>
							</div>
						</li>
						<li>
							<input type="text" name="grade" required minlength="1" maxlength="6" laceholder="分数"/>
						</li>
						<li>
							<div  class="mylogin-lt"></div>
							<div class="mylogin-rt">
								<a href="${ctx}/index-3.html">登录账号</a>
							</div>
						</li>
					</ul>
					<div class="mylogin-btn loginbtn" type="submit"><button><i class="glyphicon glyphicon-ok"></i></button></div>
				</div>
			</div>
		</form:form>
		
	</body>
</html>


